import React, { PureComponent } from "react";
import immutable from "immutable";

// 一、immutable的Map对象，Map对象对应操作的是json对象。

function fn() {
  var obj1 = {
    id: "007",
    name: "张三疯",
    address: {
      province: "陕西省",
      city: "西安市",
    },
  };

  // 1、Map方法：调用map函数把json对象转成immutable的map对象(不可变的)
  let mapObj1 = immutable.Map(obj1);

  // immutable对象是不可变的。所以，调用下面的set方法，并不会改变mapObj1对象。
  let mapObj2 =  mapObj1.set("name","张四疯");//修改了immutable对象（Map），mapObj1是没有变的，返回值是修改后的结果，mapObj1和mapObj2是结构共享的。

  console.log("obj1",obj1);
  console.log("mapObj1",mapObj1);//mapObj1是没有变的
  console.log("mapObj2",mapObj2);//mapObj2是新值。

  // 2、toJS方法：immutable对象的toJS()方法可以把immutable对象转成json对象。
  console.log("mapObj1.toJS()",mapObj1.toJS());
  console.log("mapObj2.toJS()",mapObj2.toJS());
   
}

// fn();

// 二、List对象，List对象对应的是数组

function fn02(){
  let books = ["三国演义","四国演义","五国演义"];

  // 1、List方法：把数组转成immutable的List对象。
  let arrBooks = immutable.List(books);

  //  调用set方法改变List的某个元素，并不会改变原List对象，返回值是修改后的List对象。
  let arrBooks02 = arrBooks.set(0,"西游记");
  console.log("arrBooks",arrBooks);
  console.log("arrBooks02",arrBooks02);

  //2、toJS方法：把List转成数组
  let arr1 = arrBooks.toJS();
  console.log("arr1",arr1);
  let arr2 = arrBooks02.toJS();
  console.log("arr2",arr2); 
}

// fn02();

// 三、Immutable的常用方法：fromJS(),toJS(),is()

function fn03(){
  // 一、fromJS（）；
  var obj1 = {
    id: "007",
    name: "张三疯",
    address: {
      province: "陕西省",
      city: "西安市",
    },
  };

  // 把obj1转成Map对象。【等价于Map方法】
  let mapObj1 = immutable.fromJS(obj1);

  let books = ["三国演义","四国演义","五国演义"];
  // 把books转成List对象。【等价于List方法】
  let arrBooks = immutable.fromJS(books);

  console.log("mapObj1",mapObj1);
  console.log("arrBooks",arrBooks);

  // 二、is（）；比较两个immutable对象的值是否相等

  var obj2 = {
    id: "007",
    name: "张三疯",
    address: {
      province: "陕西省",
      city: "西安市",
    },
  };

  // console.log("obj1==obj2",obj1===obj2);//false

  console.log(immutable.is(immutable.fromJS(obj1),immutable.fromJS(obj2)));//true。
}

fn03();

export default class ImmutableDemo extends PureComponent {
  render() {
    return (
      <div>
        <h1>immutable示例</h1>
      </div>
    );
  }
}
